<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        OrderList
    </ui:define>

    <ui:define name="description">
        OrderList is used to sort a collection via Drag and Drop based reordering, transition effects, pojo support, theme support and more.
    </ui:define>

    <ui:param name="documentationLink" value="/components/orderlist" />

    <ui:define name="implementation">

        <h:form>
            <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />

            <h3 style="margin-top: 0">Basic OrderList</h3>
            <p:orderList value="#{orderListView.cities}" var="city" controlsLocation="none" itemLabel="#{city}" itemValue="#{city}" />
            <p:commandButton value="Submit" update="displayCities" oncomplete="PF('cityDialog').show()" style="margin-top:5px" />

            <h3>Pojo Support with Clip Effect, Captions, Custom Content, Reorder Controls, Events and Responsive</h3>
            <p:orderList value="#{orderListView.themes}" var="theme" itemValue="#{theme}" converter="#{themeConverter}" controlsLocation="left" responsive="true">
                <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/>
                <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/>
                <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/>

                <f:facet name="caption">Available</f:facet>

                <p:column style="width:40px">
                    <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{theme.name}.png" alt="#{theme.name}" styleClass="ui-theme"/>
                </p:column>

                 <p:column>
                    <h:outputText value="#{theme.displayName}" />
                </p:column>
            </p:orderList>
            <p:commandButton value="Submit" update="displayThemes" oncomplete="PF('themesDialog').show()" style="margin-top:5px" />

            <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog" header="Cities" width="200">
                <p:dataList id="displayCities" value="#{orderListView.cities}" var="city">
                    <h:outputText value="#{city}" />
                </p:dataList>
            </p:dialog>

            <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="themesDialog" header="Themes" width="200" id="dlgThemes">
                <h:panelGrid id="displayThemes" columns="2">
                    <ui:repeat value="#{orderListView.themes}" var="theme">
                        <h:outputText value="#{theme.displayName}" style="margin-right:5px" />
                        <br />
                    </ui:repeat>
                </h:panelGrid>
            </p:dialog>
        </h:form>

    </ui:define>

</ui:composition>
